<template>
  <div class="content-warp">
    <el-form class="search-container" :model="queryParams" ref="queryRef" :inline="true">
      <el-form-item label="计划跟踪号" prop="motno">
        <el-input
          v-model="queryParams.motno"
          placeholder="请输入计划跟踪号"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="异常物料编码" prop="fname">
        <el-input
          v-model="queryParams.fname"
          placeholder="请输入异常物料编码"
          @keyup.enter="handleQuery"
        />
      </el-form-item>

      <el-form-item label="负责人" prop="personinChargeId">
        <dc-select-user
          v-model="queryParams.personinChargeId"
          placeholder="请选择负责人"
          :multiple="false"
          :multiple-limit="1"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="table-container" v-loading="loading">
      <el-button type="primary" class="mb-5" @click="handleInitiate">发起流程</el-button>
      <el-table :data="tableData" :row-style="{ height: '48px' }">
        <el-table-column label="序号" width="100" type="index" align="center">
          <template #default="scoped">
            <span>{{ (queryParams.current - 1) * queryParams.size + scoped.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="startProcessUser"
          label="发起人"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="startProcessTime"
          label="创建时间"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="nodeName" label="当前状态" align="center" show-overflow-tooltip>
          <template #default="scoped">
            {{ scoped.row.nodeName || '-' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="materialName"
          label="专案名称"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="motno" label="专案号" align="center" show-overflow-tooltip />
        <el-table-column
          prop="abnormalType"
          label="异常类别"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column
          prop="fname"
          label="异常物料名称"
          width="150"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="fnumber" width="150" label="异常物料料号" align="center" />
        <el-table-column prop="fspecification" label="异常物料规格" align="center" width="150" />
        <el-table-column prop="number" label="异常数量" align="center" show-overflow-tooltip />
        <el-table-column
          prop="abnormalMatters"
          label="异常描述"
          align="center"
          show-overflow-tooltip
        />
        <el-table-column prop="personInCharge" label="责任人" align="center" show-overflow-tooltip>
          <template #default="scoped">
            {{ scoped.row.personInCharge.realName }}
          </template>
        </el-table-column>
        <el-table-column prop="causeAnalysis" label="原因分析" align="center" />
        <el-table-column prop="countermeasure" label="对策" align="center" show-overflow-tooltip />
        <el-table-column prop="updateTime" label="最后处理时间" align="center" width="150" />
      </el-table>
    </div>
    <dc-pagination
      v-show="total > 0"
      :total="total"
      v-model:page="queryParams.current"
      v-model:limit="queryParams.size"
      @pagination="getData"
    />
  </div>
</template>

<script setup name="MyClientsList">
import { getCurrentInstance, reactive, toRefs } from 'vue';
import Api from '@/api/index'; // 根据实际路径调整导入
import { onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const { proxy } = getCurrentInstance();

const data = reactive({
  loading: false,
  queryParams: {
    current: 1,
    size: 10,
  },
  total: 0,
  tableData: [],
});

const { loading, queryParams, total, tableData } = toRefs(data);

onMounted(() => {
  getData();
});

// 获取主数据列表
const getData = async () => {
  try {
    loading.value = true;
    const res = await Api.pdp.milProcess.list(queryParams.value);
    const { code, data } = res.data;
    if (code === 200) {
      tableData.value = data.records;
      tableData.value.forEach(item => {
        item.personInCharge = JSON.parse(item.personInCharge);
        return item;
      });
      total.value = data.total;
    }
    loading.value = false;
  } catch (err) {
    loading.value = false;
  }
};

const handleInitiate = async () => {
  const params = {
    processKey: 'mil_process',
  };
  const res = await Api.pdp.settled.processForm(params);
  const { code, data } = res.data;
  if (code === 200) {
    router.push(`/workflow/process/start/${data.enCode}`);
  }
};

/** 重置搜索 **/
const handleReset = () => {
  queryParams.value.current = 1;
  proxy.resetForm('queryRef');
  getData();
};

// 处理查询
const handleQuery = () => {
  queryParams.value.current = 1;
  getData();
};
</script>
<style lang="scss" scoped></style>
